import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 配置 element-plus组件和Icon自动按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// Icon自动按需引入
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// gzip静态资源压缩
import viteCompression from 'vite-plugin-compression'
// 图片压缩
import imagemin from 'unplugin-imagemin/vite';
import path from 'path'
const pathSrc = path.resolve(__dirname, 'src')
export default ({ mode }) => {
  return defineConfig({
    build: {
      // 清除console和debuger
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
      rollupOptions: {
        output: {
          // 文件归类
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks(id) {
            // 超大静态资源拆分
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          },
        }
      },
    },
    resolve: {
      alias: {
        '@/': `${pathSrc}/`,
      },
    },
    plugins: [
      vue(),
      AutoImport({
        resolvers: [
          // 自动导入element-plus组件
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          })
        ],
      }),
      Components({
        dirs: ["src/components"], // 要导入组件的目录路径
        extensions: ["vue"],
        deep: true, // 搜索子目录
        dts: true, // 不使用ts
        include: [/\.vue$/, /\.vue\?vue/], // 只识别vue文件
        resolvers: [
          // 使用unplugin-vue-components按需加载样式，开发环境会导致项目异常卡顿
          // 导致原因：vite会预加载style，当首次启动 vite 服务时会对 style 进行依赖预构建，，因为element-plus的按需样式会导入大量style文件，导致页面会卡住直至style构建完成
          // https://github.com/antfu/unplugin-vue-components/issues/361
          //  这里开发环境不按需加载样式，生产环境才按需加载样式
          // 自动导入element-plus组件
          ElementPlusResolver({
            importStyle: mode === "development" ? false : "sass",
          }),
          // 自动导入图标组件
          IconsResolver({
            enabledCollections: ['ep']
          })
        ],
      }),
      {
        name: "import-element-plus-style",
        transform(code, id) {
          if (/src\/main.js$/.test(id)) {
            if (mode === "development") {
              return {
                code: `${code};import 'element-plus/dist/index.css';`,
                map: null,
              }
            } else {
              return {
                code: `${code};import 'element-plus/theme-chalk/src/message-box.scss';import 'element-plus/theme-chalk/src/message.scss';`,
                map: null,
              }
            }
          }
        },
      },
      // 自动导入图标组件
      Icons({
        autoInstall: true,
      }),
      // gzip静态资源压缩
      viteCompression({
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: 'gzip',
        ext: '.gz',
      }),
      imagemin({
        mode: "squoosh",
        compress: {
          png: {
            quality: 80
          }
        },
        conversion: [
          { from: 'png', to: 'png' },
        ]
      })
    ],
    server: {
      port: 5173,
      open: false, //自动打开 
      base: "./ ", //生产环境路径
      proxy: {
        '^/api': {
          target: 'http://127.0.0.1:8903', // 后端服务实际地址[仅开发环境有用]
          changeOrigin: true, //开启代理
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },

  })
}
